<template>
  <!-- 动态粒子背景 -->
  <div class="bg-canvas">
    <canvas id="particleCanvas"></canvas>
  </div>

  <!-- 前景内容 -->
  <div class="foreground">
    <!-- 顶部操作区 -->
    <section class="list-header">
      <h2>产品列表</h2>
      <el-input v-model="keyword" placeholder="搜索产品" clearable>
        <template #prefix><el-icon><Search /></el-icon></template>
      </el-input>
    </section>

    <!-- 分类 Tabs -->
    <el-tabs v-model="activeTab" class="tabs" @tab-change="handleTabChange">
      <el-tab-pane label="全部" name="all" />
      <el-tab-pane label="电子产品" name="electronics" />
      <el-tab-pane label="服装" name="clothing" />
      <el-tab-pane label="家居" name="home" />
      <el-tab-pane label="运动" name="sports" />
      <el-tab-pane label="书" name="books" />
    </el-tabs>

    <!-- 商品网格 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="p in filteredList" :key="p.id">
        <el-card shadow="hover" class="product-card glass-card">
          <img :src="p.pic" class="img" />
          <div class="info">
            <div class="name">{{ p.name }}</div>
            <div class="meta">
              <el-tag size="small" :type="p.tagType">{{ p.category }}</el-tag>
              <el-rate :value="p.rating" disabled show-score text-color="#ff9900" />
            </div>
            <div class="price">￥{{ p.price }}</div>
            <el-button type="primary" size="small" round @click="$router.push('/product/' + p.id)">
              查看详情
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 结果提示 -->
    <div class="result">找到 {{ filteredList.length }} 个产品</div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'

const keyword = ref('')
const activeTab = ref('all')

/* 模拟数据 */
const list = ref([
  { id: 1, name: 'iPhone 15 Pro', price: 7999, rating: 4.9, category: '电子产品', tagType: 'danger', pic: 'https://picsum.photos/seed/p1/300/300' },
  { id: 2, name: '小米 14', price: 3999, rating: 4.7, category: '电子产品', tagType: 'danger', pic: 'https://picsum.photos/seed/p2/300/300' },
  { id: 3, name: '华为 Mate 60', price: 5999, rating: 4.8, category: '电子产品', tagType: 'danger', pic: 'https://picsum.photos/seed/p3/300/300' },
  { id: 4, name: 'MacBook Air M2', price: 9499, rating: 4.9, category: '电子产品', tagType: 'danger', pic: 'https://picsum.photos/seed/p4/300/300' },
  { id: 5, name: '纯棉衬衫', price: 199, rating: 4.6, category: '服装', tagType: 'primary', pic: 'https://picsum.photos/seed/p5/300/300' },
  { id: 6, name: '运动鞋', price: 399, rating: 4.5, category: '服装', tagType: 'primary', pic: 'https://picsum.photos/seed/p6/300/300' },
  { id: 7, name: '北欧落地灯', price: 299, rating: 4.7, category: '家居', tagType: 'success', pic: 'https://picsum.photos/seed/p7/300/300' },
  { id: 8, name: '智能台灯', price: 159, rating: 4.4, category: '家居', tagType: 'success', pic: 'https://picsum.photos/seed/p8/300/300' },
  { id: 9, name: '瑜伽垫', price: 89, rating: 4.6, category: '运动', tagType: 'warning', pic: 'https://picsum.photos/seed/p9/300/300' },
  { id: 10, name: '编程之美', price: 69, rating: 4.8, category: '书', tagType: 'info', pic: 'https://picsum.photos/seed/p10/300/300' },
])

function handleTabChange() {
  keyword.value = ''
}

const filteredList = computed(() => {
  let temp = list.value
  if (activeTab.value !== 'all') {
    const map = { electronics: '电子产品', clothing: '服装', home: '家居', sports: '运动', books: '书' }
    temp = temp.filter(item => item.category === map[activeTab.value])
  }
  if (keyword.value) {
    temp = temp.filter(item => item.name.toLowerCase().includes(keyword.value.toLowerCase()))
  }
  return temp
})

/* 粒子背景 */
onMounted(() => {
  const canvas = document.getElementById('particleCanvas')
  const ctx = canvas.getContext('2d')
  let w = canvas.width = window.innerWidth
  let h = canvas.height = window.innerHeight
  const particles = []
  const count = 60
  for (let i = 0; i < count; i++) {
    particles.push({
      x: Math.random() * w,
      y: Math.random() * h,
      r: Math.random() * 1.2 + 0.5,
      vx: (Math.random() - 0.5) * 0.3,
      vy: (Math.random() - 0.5) * 0.3,
    })
  }
  function animate() {
    ctx.clearRect(0, 0, w, h)
    particles.forEach(p => {
      ctx.beginPath()
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2)
      ctx.fillStyle = 'rgba(255,255,255,0.7)'
      ctx.fill()
      p.x += p.vx
      p.y += p.vy
      if (p.x < 0 || p.x > w) p.vx *= -1
      if (p.y < 0 || p.y > h) p.vy *= -1
    })
    requestAnimationFrame(animate)
  }
  animate()
  window.addEventListener('resize', () => {
    w = canvas.width = window.innerWidth
    h = canvas.height = window.innerHeight
  })
})
</script>

<style scoped>
/* ===== 背景层 ===== */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #2c3e50 0%, #42b883 100%);
}
#particleCanvas {
  display: block;
}

/* ===== 前景层 ===== */
.foreground {
  position: relative;
  z-index: 1;
  padding: 40px 20px;
  color: #fff;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.tabs {
  margin-bottom: 20px;
}

/* 毛玻璃卡片 */
.glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  transition: 0.3s;
}
.glass-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.18);
}

.product-card {
  overflow: hidden;
  margin-bottom: 20px;
}
.img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 8px;
}
.info {
  padding: 12px;
}
.name {
  font-size: 16px;
  margin-bottom: 8px;
  color: #fff;
}
.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.price {
  color: #ffeb3b;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px;
}
.result {
  text-align: center;
  margin-top: 30px;
  opacity: 0.85;
}
</style>